<template>
	<view class="template-partner tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-navbar fixed height="" back-icon="" home-icon="" :safe-area-inset-right="false">通讯录</tn-navbar>
		<!-- 使用组件预期的对象格式数据 -->
		<tn-index-list :data="formattedData">
			<!-- 插槽参数保持与组件内部传递一致 -->
			<template #default="{ data }">
				<view class="list-data">
					<image class="image" :src="data.avatar" mode="aspectFill" />
					<view class="info">
						<view class="username">{{ data.username }}</view>
						<view class="office tn-gray_text">{{ data.office }}</view>
					</view>
				</view>
			</template>
		</tn-index-list>
		
		 <view class="tn-tabbar-height"></view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				// 原始数组数据（不变）
				listData: [{
						title: 'A',
						data: [{
								id: 0,
								avatar: 'https://picsum.photos/id/1005/200/200',
								username: '阿杰',
								office: '产品经理'
							},
							{
								id: 1,
								avatar: 'https://picsum.photos/id/1012/200/200',
								username: '阿丽',
								office: 'UI设计师'
							},
							{
								id: 2,
								avatar: 'https://picsum.photos/id/1027/200/200',
								username: '阿强',
								office: '前端开发'
							},
							{
								id: 3,
								avatar: 'https://picsum.photos/id/1074/200/200',
								username: '阿敏',
								office: '后端开发'
							},
							{
								id: 4,
								avatar: 'https://picsum.photos/id/1025/200/200',
								username: '阿琳',
								office: '测试工程师'
							},
							{
								id: 5,
								avatar: 'https://picsum.photos/id/1062/200/200',
								username: '阿辉',
								office: '运维工程师'
							},
							{
								id: 6,
								avatar: 'https://picsum.photos/id/1066/200/200',
								username: '阿娇',
								office: '数据分析师'
							},
							{
								id: 7,
								avatar: 'https://picsum.photos/id/1083/200/200',
								username: '阿坤',
								office: '产品助理'
							},
							{
								id: 8,
								avatar: 'https://picsum.photos/id/1084/200/200',
								username: '阿雯',
								office: '交互设计师'
							},
							{
								id: 9,
								avatar: 'https://picsum.photos/id/1092/200/200',
								username: '阿哲',
								office: '全栈开发'
							}
						]
					},
					{
						title: 'C',
						data: [{
								id: 10,
								avatar: 'https://picsum.photos/id/1000/200/200',
								username: '彩英',
								office: '内容运营'
							},
							{
								id: 11,
								avatar: 'https://picsum.photos/id/1001/200/200',
								username: '超宇',
								office: '活动策划'
							},
							{
								id: 12,
								avatar: 'https://picsum.photos/id/1002/200/200',
								username: '晨曦',
								office: '用户研究'
							},
							{
								id: 13,
								avatar: 'https://picsum.photos/id/1003/200/200',
								username: '春雨',
								office: '品牌专员'
							},
							{
								id: 14,
								avatar: 'https://picsum.photos/id/1004/200/200',
								username: '聪聪',
								office: '市场推广'
							},
							{
								id: 15,
								avatar: 'https://picsum.photos/id/1006/200/200',
								username: '翠华',
								office: '行政专员'
							},
							{
								id: 16,
								avatar: 'https://picsum.photos/id/1009/200/200',
								username: '成成',
								office: '财务助理'
							},
							{
								id: 17,
								avatar: 'https://picsum.photos/id/1010/200/200',
								username: '晨阳',
								office: '人力资源'
							},
							{
								id: 18,
								avatar: 'https://picsum.photos/id/1011/200/200',
								username: '彩云',
								office: '客服主管'
							},
							{
								id: 19,
								avatar: 'https://picsum.photos/id/1014/200/200',
								username: '承宇',
								office: '商务经理'
							}
						]
					},
					{
						title: '#',
						data: [{
								id: 20,
								avatar: 'https://picsum.photos/id/1071/200/200',
								username: '小宇',
								office: '实习生'
							},
							{
								id: 21,
								avatar: 'https://picsum.photos/id/1072/200/200',
								username: '小桐',
								office: '实习生'
							},
							{
								id: 22,
								avatar: 'https://picsum.photos/id/1073/200/200',
								username: '小琪',
								office: '实习生'
							},
							{
								id: 23,
								avatar: 'https://picsum.photos/id/1075/200/200',
								username: '小川',
								office: '实习生'
							},
							{
								id: 24,
								avatar: 'https://picsum.photos/id/1076/200/200',
								username: '小野',
								office: '实习生'
							},
							{
								id: 25,
								avatar: 'https://picsum.photos/id/1077/200/200',
								username: '小夏',
								office: '实习生'
							},
							{
								id: 26,
								avatar: 'https://picsum.photos/id/1078/200/200',
								username: '小梦',
								office: '实习生'
							},
							{
								id: 27,
								avatar: 'https://picsum.photos/id/1079/200/200',
								username: '小磊',
								office: '实习生'
							},
							{
								id: 28,
								avatar: 'https://picsum.photos/id/1080/200/200',
								username: '小琳',
								office: '实习生'
							},
							{
								id: 29,
								avatar: 'https://picsum.photos/id/1081/200/200',
								username: '小航',
								office: '实习生'
							}
						]
					}
				]
			};
		},
		computed: {
			formattedData() {
				const result = {};
				this.listData.forEach(item => {
					result[item.title] = {
						title: item.title,
						data: item.data
					};
				});
				return result;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.template-partner {
		max-height: 100vh;
	}
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		background-color: #F9F9F9;
	}
	
	/* 样式保持不变 */
	.list-data {
		display: flex;
		padding: 30rpx;

		.image {
			width: 90rpx;
			height: 90rpx;
			border-radius: 15rpx;
		}

		.info {
			margin-left: 20rpx;
			line-height: 1;

			.username {
				font-size: 34rpx;
			}

			.office {
				margin-top: 18rpx;
				font-size: 26rpx;
			}
		}
	}
</style>